<template>
  <div id="bacAntClassSeDiv">
    <Splitpanes style="height: 100%">
      <Pane size="40">
        <vxe-toolbar perfect>
          <template #buttons>
            <vxe-input style="width: 180px" v-model="searchForm.searchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="getBacAntClassList" @keyup="keyupEnter" @search-click="getBacAntClassList()"></vxe-input>
            <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="tloading" @click="getBacAntClassList"></vxe-button>
            <vxe-button type="text" class="button-blue" icon="vxe-icon-square-plus" content="新建" @click="addBacAntClassDialog()"></vxe-button>
            <vxe-button type="text" icon="vxe-icon-delete" class="button-red" content="删除" @click="deleteBacAntClass"></vxe-button>
            <vxe-button type="text" class="button-blue" icon="vxe-icon-sort" content="同步字典数据" @click="sysBacAntClass"></vxe-button>
          </template>
        </vxe-toolbar>

        <div class="modulTable">
          <vxe-table ref="bacAntClassTableRef" class="mytable-scrollbar bacAntClassTableClazz" border="inner" align="center" height="auto" :data="bacAntClassList" :loading="tloading" @current-change="moduleRowClick" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow keep-source>
            <vxe-column type="checkbox" width="30"></vxe-column>

            <vxe-column field="antClassNo" title="分类编号" width="200" align="left">
            </vxe-column>
            <vxe-column field="antClassNa" title="分类名称" align="left">
            </vxe-column>
            <vxe-column field="whonetCode" title="whonetCode" width="200" align="left">
            </vxe-column>

            <vxe-column field="inputCode" title="助记符" width="100" align="left">
            </vxe-column>

            <vxe-column field="seq" title="顺序" width="50">
            </vxe-column>
          </vxe-table>
        </div>
      </Pane>
      <Pane size="60">
        <el-tabs type="border-card" v-model="activeName" @tab-click="tabHandleClick">
          <el-tab-pane label="基础信息" name="first">
            <vxe-toolbar perfect>
              <template #buttons>
                <vxe-button type="text" class="button-blue" @click="saveBacAntClass('bacAntClassFormRef')" icon="vxe-icon-square-plus" content="保存"></vxe-button>
              </template>
            </vxe-toolbar>
            <el-form ref="bacAntClassFormRef" :model="bacAntClassForm" :rules="bacAntClassFormRule" class="form-input-m" label-width="100px" inline-message >
              <el-row>
                <el-col :span="12">
                  <el-form-item prop="antClassNo" label="分类编号">
                    <el-input type="text" v-model="bacAntClassForm.antClassNo" placeholder="请输入分类编号" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="antClassNa" label="分类名称">
                    <el-input type="text" v-model="bacAntClassForm.antClassNa" placeholder="请输入分类编号" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="whonetCode" label="whonetCode">
                    <el-input type="text" v-model="bacAntClassForm.whonetCode" placeholder="请输入whonetCode" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="inputCode" label="助记符">
                    <el-input type="text" v-model="bacAntClassForm.inputCode" placeholder="请输入助记符	" clearable></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item prop="seq" label="顺序号">
                    <el-input type="text" v-model="bacAntClassForm.seq" placeholder="请输入顺序号" clearable></el-input>
                  </el-form-item>
                </el-col>

              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="子分类" name="subclassPane" :disabled="isEmpty(bacAntClassForm.id)">
            <BacAntSubClass ref="antSubClassRef" />
          </el-tab-pane>

        </el-tabs>
      </Pane>
    </Splitpanes>
  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { Splitpanes, Pane } from 'splitpanes';
import moment from 'moment';
let { proxy }: any = getCurrentInstance();
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示
import { isEmpty } from 'lodash';
import BacAntSubClass from './BacAntSubClass.vue';

let searchForm = {
  searchValue: ''
};
let tloading = ref(false); //加载状态
let activeName = ref('first');
let refselectIcon = ref(null);
let bacAntClassList: any = reactive([]);
let sltBacAntClass: any = ref({});
let antSubClassRef: any = ref(null);
let moduleMenuRef: any = ref(null);
let bacAntClassForm = reactive({
  id: null,
  antClassNo: '',
  antClassNa: '',
  whonetCode: '',
  inputCode: '',
  seq: 1,
  orgId: ''
});

let bacAntClassFormRule = {
  antClassNa: [
    {
      required: true,
      message: '请输入供应商名称',
      trigger: 'blur'
    },
    {
      min: 2,
      max: 20,
      message: '长度为2到20个字符',
      trigger: 'blur'
    }
  ],
  antClassNo: [
    {
      required: true,
      message: '请输入供应商名称',
      trigger: 'blur'
    }
  ],
  staModCode: [
    {
      required: true,
      message: '请输入供应商名称',
      trigger: 'blur'
    }
  ]
};

// 页面加载时
onMounted(() => {
  getBacAntClassList(); //获取检验仪器表格数据
});

function getBacAntClassList() {
  tloading.value = true;
  bacAntClassList.length = 0; //放入数据前清空数据
  const url = '/bac/ant/antClass/findBacAntClassList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        seachValue: searchForm.searchValue
      }
    })
    .then((res: any) => {
      bacAntClassList.push(...res.data);
      const kn = bacAntClassList.find((k) => k.id == sltBacAntClass.value.id);
      if (isEmpty(kn)) {
        moduleRowClick({ row: bacAntClassList[0] }); //默认选中第一条数据
      } else {
        moduleRowClick({ row: kn }); //默认选中第一条数据
      }
      tloading.value = false;
    })
    .catch((err: any) => {
      tloading.value = false;
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}

function saveBacAntClass(formName: any) {
  let $el = proxy.$refs[formName];
  $el.validate((valid: any) => {
    if (!valid) {
      return false;
    }
    if (bacAntClassForm.id === null) {
      const url = '/bac/ant/antClass/addBacAntClass';
      const bacAntClass = {
        antClassNo: bacAntClassForm.antClassNo,
        antClassNa: bacAntClassForm.antClassNa,
        whonetCode: bacAntClassForm.whonetCode,
        inputCode: bacAntClassForm.inputCode,
        seq: bacAntClassForm.seq
      };
      proxy.$http
        .post(url, bacAntClass)
        .then((res: any) => {
          VxeMessage('新增成功', VxeNotifyType.success);
          clearForm();
          sltBacAntClass.value.id = res.data.id;
          getBacAntClassList();
        })
        .catch((err: any) => {
          VxeMessage('新增失败', VxeNotifyType.error);
        });
    } else {
      // 修改用户
      const url = '/bac/ant/antClass/editBacAntClass';

      const bacAntClass = {
        id: bacAntClassForm.id,
        antClassNo: bacAntClassForm.antClassNo,
        antClassNa: bacAntClassForm.antClassNa,
        whonetCode: bacAntClassForm.whonetCode,
        inputCode: bacAntClassForm.inputCode,
        seq: bacAntClassForm.seq
      };
      proxy.$http
        .post(url, bacAntClass)
        .then((res: any) => {
          VxeMessage('修改成功', VxeNotifyType.success);
          sltBacAntClass.value.id = res.data.id;
          setTimeout(() => {
            clearForm();
            getBacAntClassList();
          }, 50);
        })
        .catch((err: any) => {
          VxeMessage('修改失败', VxeNotifyType.error);
        });
    }
  });
}
function deleteBacAntClass() {
  const sltBacAntClasss = (proxy.$refs.bacAntClassTableRef as any).getCheckboxRecords();
  if (!(sltBacAntClasss.length > 0)) {
    VxeMessage('请勾选要删除的数据', VxeNotifyType.info);
  } else {
    proxy
      .$confirm('确定要删除当前勾选的数据？', '提示', {
        cancelButtonClass: 'cancel-button',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(async () => {
        //后台删除数据
        const delBacAntClassList = sltBacAntClasss.filter((p: any) => !isEmpty(p.id));
        if (delBacAntClassList.length > 0) {
          const data = { bacAntClassList: delBacAntClassList };
          const url = '/bac/ant/antClass/batchDeleteBacAntClassList';
          proxy.$http
            .post(url, data)
            .then((res: any) => {
              getBacAntClassList(); // 获取检验仪器表格数据
              VxeMessage(res.status.msg, VxeNotifyType.success);
            })
            .catch((err: any) => {
              VxeMessage(err, VxeNotifyType.error);
            });
        }
      })
      .catch((err: any) => {
        // VxeMessage(err, VxeNotifyType.error);
      });
  }
}
// 回车查询
function keyupEnter(e: any) {
  if (e.$event.code == 'Enter') {
    getBacAntClassList();
  }
}
// 点击设计模式表格当前行触发右侧表单变化
function moduleRowClick({ row }: any) {
  if (isEmpty(row)) {
    clearForm();
    sltBacAntClass.value = {};
  } else {
    (proxy.$refs.bacAntClassTableRef as any).setCurrentRow(row);
    setBacAntClassForm(row);
    if (activeName.value == 'subclassPane') {
      antSubClassRef.value.initPage(bacAntClassForm);
    }
  }
}

function addBacAntClassDialog() {
  clearForm();
  sltBacAntClass.value = {};
  (proxy.$refs.bacAntClassTableRef as any).clearCurrentRow();
  activeName.value = 'first';
}

// 清空中间规则弹框表单
function clearForm() {
  bacAntClassForm.id = null;
  bacAntClassForm.antClassNo = '';
  bacAntClassForm.antClassNa = '';
  bacAntClassForm.whonetCode = '';
  bacAntClassForm.inputCode = '';

  bacAntClassForm.seq = 1;
  bacAntClassForm.orgId = '';
}

// 编辑当前行规则
function setBacAntClassForm(row: any) {
  bacAntClassForm.id = row.id;
  bacAntClassForm.antClassNo = row.antClassNo;
  bacAntClassForm.antClassNa = row.antClassNa;
  bacAntClassForm.whonetCode = row.whonetCode;
  bacAntClassForm.inputCode = row.inputCode;
  bacAntClassForm.seq = row.seq;
  bacAntClassForm.orgId = row.orgId;
  sltBacAntClass.value = row;
}

function tabHandleClick(tab: any) {
  if (tab.props.name == 'subclassPane') {
    antSubClassRef.value.initPage(bacAntClassForm);
  }
}

// 同步数据
async function sysBacAntClass() {
  const url = '/bac/ant/antClass/syncBacAntClass';

  proxy.$http
    .get(url)
    .then((res: any) => {})
    .catch((err: any) => {
      VxeMessage('同步失败', VxeNotifyType.error);
    });
}
</script>

<style lang="scss" scoped>
#bacAntClassSeDiv {
  height: 100%;

  // 附加按钮间距
  .button-blue,
  .button-red {
    margin: 5px 0 5px 5px;
  }
  .form-input-m{
    width: 60%;
  }

  //右侧质控项目表格
  .modulTable {
    height: calc(100% - 40px);
    background-color: $base-white;
  }
  :deep(.el-tabs) {
    height: 100%;
  }
  :deep(.el-tabs__content) {
    padding: 0;
    height: calc(100% - 40px);
    .el-tab-pane {
      height: 100%;
      .homeimg {
        width: 70px;
        height: 70px;
      }
    }
  }
}
</style>